import {DataTable} from 'react-native-paper';
import {ScrollView} from 'react-native';
import React from 'react';
import useDimensions from 'hooks/useDimensions';
type ListItem = {
  name: string;
  dept: string;
  post: string;
  status: string;
};
interface defineProps {
  columnsRender: () => React.ReactElement;
  renderItem: (data: ListItem) => React.ReactElement;
}
export default (props: defineProps) => {
  const hp = useDimensions();
  const [searchQuery, setSearchQuery] = React.useState('');
  const [numberOfItemsPerPageList] = React.useState([5, 10, 15]);
  const [items, setItems] = React.useState([
    {
      name: '案子真',
      dept: '衢州柯山消防大队',
      post: '战斗员',
      status: '出勤',
    },
    {
      name: '案子真',
      dept: '衢州柯山消防大队',
      post: '战斗员',
      status: '出勤',
    },
    {
      name: '案子真',
      dept: '衢州柯山消防大队',
      post: '战斗员',
      status: '出勤',
    },
    {
      name: '案子真',
      dept: '衢州柯山消防大队',
      post: '战斗员',
      status: '出勤',
    },
    {
      name: '案子真',
      dept: '衢州柯山消防大队',
      post: '战斗员',
      status: '出勤',
    },
    {
      name: '案子真',
      dept: '衢州柯山消防大队',
      post: '战斗员',
      status: '出勤',
    },
    {
      name: '案子真',
      dept: '衢州柯山消防大队',
      post: '战斗员',
      status: '出勤',
    },
    {
      name: '案子真',
      dept: '衢州柯山消防大队',
      post: '战斗员',
      status: '出勤',
    },
  ]);
  const [itemsPerPage, onItemsPerPageChange] = React.useState(
    numberOfItemsPerPageList[0],
  );
  const [page, setPage] = React.useState<{
    total: number;
    currentPage: number;
  }>({
    total: 0,
    currentPage: 1,
  });
  const from = (page.currentPage - 1) * itemsPerPage;
  const to = Math.min(page.currentPage * itemsPerPage, page.total);
  const onChangeSearch = (query: string) => {
    setPage(data => {
      return {
        ...data,
        currentPage: 1,
      };
    });
    setSearchQuery(query);
  };
  return (
    <DataTable
      style={{
        marginTop: 30 * hp,
        flex: 1,
      }}>
      {/* <DataTable.Header /> */}
      <DataTable.Row style={{alignItems: 'center', flexDirection: 'row'}}>
        {props.columnsRender()}
      </DataTable.Row>

      <ScrollView
        overScrollMode="always"
        style={{
          flex: 1,
        }}>
        {items.map((item, index) => (
          <DataTable.Row
            key={index}
            style={{alignItems: 'center', flexDirection: 'row'}}>
            {props.renderItem(item)}
          </DataTable.Row>
        ))}
      </ScrollView>
      {!searchQuery && (
        <DataTable.Pagination
          page={page.currentPage}
          numberOfPages={Math.ceil(page.total / itemsPerPage) + 1}
          onPageChange={page => {
            setPage(data => ({
              ...data,
              currentPage: page === 0 ? 1 : page,
            }));
          }}
          label={`${page.total === 0 ? 0 : from + 1}-${to} of ${page.total}`}
          numberOfItemsPerPageList={numberOfItemsPerPageList}
          numberOfItemsPerPage={itemsPerPage}
          onItemsPerPageChange={value => {
            setPage(data => ({
              ...data,
              currentPage: 1,
            }));
            onItemsPerPageChange(value);
          }}
          showFastPaginationControls
        />
      )}
    </DataTable>
  );
};
